<template lang="html">
    <div class="cen-table">

        <div class="tabs">

            <div class="tabs-box box-l">
                <div class="table-top address-top">{{headerData.shortName}} Address : {{address}}</div>
                <table class="table-layout custom-table" border="1">
                    <thead class="layout-head">
                        <tr>
                            <th width="30%">Total Sent ({{headerData.shortName}})</th>
                            <th width="30%">Total Received ({{headerData.shortName}})</th>
                            <th width="30%">Balance ({{headerData.shortName}})</th>
                        </tr>
                    </thead>
                    <tbody class="layout-cen">
                        <tr>
                            <td>{{AssestData.sent}}</td>
                            <td>{{AssestData.received}}</td>
                            <td>{{AssestData.balance}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="tabs-box box-r">
                <qrcode :value="address" class="address-code" :options="{ size: 120 }"></qrcode>
            </div>
        </div>



        <br>
        <br>
        <div class="table-top">Latest Transactions</div>
        <table class="table-layout" border="1" :class="{ 'loading': isLoading }">
            <thead class="layout-head">
                <tr>
                    <th width="25%">Timestamp</th>
                    <th width="55%">Hash</th>
                    <th width="20%">Amount ({{headerData.shortName}})</th>
                </tr>
            </thead>
            <tbody class="layout-cen">
                <tr v-for="(item,index) in AddressData">
                    <td>{{item.time}}</td>
                    <td>
                        <a class="cursor" @click="lookHash(item.txId);">{{item.txId}}</a>
                    </td>
                    <td class="input" v-if="item.type == 1">+ {{item.amount}}</td>
                    <td class="others" v-if="item.type == 2">- {{item.amount}}</td>
                </tr>
            </tbody>
        </table>
        <div class="table-page">
            <v-pagination class="ulpages" :layout="['prev', 'pager', 'next']" :total="pageObj.count" @page-change="pageChange" @page-size-change="pageSizeChange"></v-pagination>
        </div>
    </div>
</template>


<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
export default {
    name:'address',
    data(){
        return{
            isLoading: true,
            address:'',
            pageObj:{
                count:0,
                pageNum:1,
                pageSize:10
            },
            AddressData:'',//地址交易列表
            AssestData:'',//地址交易信息
        }
    },
    computed: {
        ...mapGetters(['G_SELECT_DATA']),
    },
    created(){
        this.headerData = this.G_SELECT_DATA;
        this.getAddress();
        this.getAssest();
    },
    methods:{
        // 查看交易txId
        lookHash(txId){
            if(txId){
                this.$router.push({name:'tx',params:{txid:txId}})
            }
        },
        // 上，下一页
        pageChange(pageIndex){
            this.pageObj.pageNum = pageIndex;
            this.getAddress();
        },
        // 跳转页面
        pageSizeChange(pageSize){
            // console.log(pageSize)
        },
        // 根据地址查询交易列表
        getAddress(){
            this.isLoading = true;
            // 根据colorId判断是彩色币还是hsr
            let requerstHeader = {
                method:'get',
                params  :{
                    pageNum:this.pageObj.pageNum,
                    pageSize:this.pageObj.pageSize
                }
            }

            let colorId = this.headerData.colorId;
            this.address = this.$route.params.has;
            if(colorId){
                requerstHeader.url = `explorer/colorcoins/api/v1/address/${this.address}`;
            }else{
                requerstHeader.url = `explorer/hsr/api/v1/address/${this.address}`;
            }

            this.$http(requerstHeader).then((res)=>{
                let data = res.data;
                if(data.responseCode === 1){
                    this.AddressData = data.responseData.detailDTOList;
                    this.pageObj.count = data.responseData.page.count;
                    this.isLoading = false;
                }
            })
        },
        // 根据地址查询资产信息
        getAssest(){
            // 根据colorId判断是彩色币还是hsr
            let requerstHeader = {
                method:'get',
            }
            this.address = this.$route.params.has;
            requerstHeader.url = `explorer/hsr/api/v1/assets/${this.address}`;

            this.$http(requerstHeader).then((res)=>{
                let data = res.data;
                if(data.responseCode === 1){
                    this.AssestData = data.responseData;
                }
            })
        }
    },
    watch:{
        '$route'(to,from){
            this.getAssest();
            this.getAddress();
        }
    }
}
</script>

<style lang="css">

</style>
